<template>
  <div class="zeroplaycontrol">
    <div class="control_btn">
      <i class="iconfont" 
      :class="$store.state.playmode==1? 'icon-danquxunhuan' : $store.state.playmode==2?'icon-suijibofang':'icon-xunhuanbofang'"
      @click="changemode"></i>
      <i class="iconfont icon-shangyishoushangyige" @click="previous"></i>
      <i
        class="mid iconfont"
        :class="$store.state.audiostate?'icon-zanting':'icon-bofang'"
        @click="playSong"
      ></i>
      <i class="iconfont icon-xiayigexiayishou" @click="next"></i>
      <i class="iconfont icon-liebiao" @click="queue"></i>
    </div>
  </div>
</template>


<script>
export default {
  name: "zeroplaycontrol",
  data() {
    return {};
  },
  methods: {
    //上一首
    previous() {
      this.$emit("next_pre", "pre");
    },
    // 播放暂停
    playSong() {
      this.$emit("controlstate");
    },
    // 下一首
    next() {
      this.$emit("next_pre", "next");
    },
    //打开播放列表
    queue() {
      this.$emit("openqueue", true);
    },
    //切换模式
    changemode(){
       this.$emit("playmode");
    }
  }
};
</script>


<style lang='scss'>
.control_btn {
  width: 100%;
  // position: absolute;
  // left: 2vw;
  // right: 2vw;
  // bottom: 30px;
  color: #fff;
  display: flex;
  justify-content: space-around;
  i {
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
    &:nth-child(1) {
      font-size: 20px;
    }
    &:nth-last-child(1) {
      font-size: 20px;
    }
  }
  .mid {
    font-size: 50px;
  }
}
</style>